<template>
	<skeleton :skeleton="{name:'simulation'}" :showSkeleton="showSkeleton">
		<block slot="content">
			<no-data :showErrorTip="noData">
				<view slot="content" class="panel">
					<view class="panel-body" v-for="(item, index) in practiceList.list" :key="index">
						<view class="panel-body-item">
							<view class="item-info">
								<view class="item-info__h3">{{ item.name }}</view>
								<view class="item-info__h6">共{{item.subjectNum}}题，总时间{{item.examMin}}分钟</view>
								<view class="item-info__h7">考试时间：{{ item.startTime }}-{{ item.endTime.substr(11,5)}}</view>
							</view>
							<view class="item-timeBox">
								<view v-if="item.taskStatus=='0'">
									<text v-if="item.joinStatus=='0'" class="item-time-one" @click="joinCompetition(index, item.examId,item.taskUserJoinId)">我要参赛</text>
									<text v-if="item.joinStatus=='1'" class="item-time-two">已报名</text>
									<text v-if="item.joinStatus=='2'" class="item-time-four" @click="startExam(index, item.paperId,item.examId,item.id,item.taskUserJoinId)">开始考试</text>
									<text v-if="item.joinStatus=='3'" class="item-time-three" @click="analysis(index, item.examId,item.recordId)">已结束</text>
									<text v-if="item.joinStatus=='4'" class="item-time-three" @click="noPermission()">已结束</text>
									<text v-if="item.joinStatus=='5'" class="item-time-three">已结束</text>
								</view>
								<view v-if="item.taskStatus=='1'">
									<text v-if="item.joinStatus=='0'||item.joinStatus=='1'||item.joinStatus=='4'" class="item-time-three" @click="noPermission()">已结束</text>
									<text v-if="item.joinStatus=='3'" class="item-time-three" 
									@click="startExam(index, item.paperId,item.examId,item.id,item.taskUserJoinId)">已结束</text>
								</view>
								<text class="item-text">报名人数：{{ item.joinCount }}人</text>
							</view>
						</view>
					</view>
					<view class="loading" v-if="noMoreData">没有更多了</view>
				</view>
			</no-data>
		</block>
	</skeleton>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import ExamService from '@/services/exam/exam.js';
	const examService = new ExamService();
	export default {
		data() {
			return {
				examType: 6,
				examStyleList: {
					// taskStatus:0:有效,1:过期,
					// joinStatus:
					0: ['item-time-one', '我要参赛'], //可报名
					1: ['item-time-two', '已报名'], //已报名，还未开始考试
					2: ['item-time-four', '开始考试'], //只有一次机会，不可中途退出
					3: ['item-time-three', '已结束'], //查看解析--可见
					4: ['item-time-three', '已结束'], //查看解析--不可见
				},
				practiceList: {
					list: []
				},
				ascription: undefined,
				pages: {
					pageNum: 1,
					pageSize: 20
				},
				noMoreData: false,
				noData: false,
				showSkeleton: true,
				curIndex: -1, //当前操作的index,考试完成时，通知改变状态
			};
		},
		
		onLoad(query) {
			if(query.from!=undefined&&query.from =='task'){
				
			}
			uni.$on('examFinish', (payload) => { //考试完成通知
				console.log('examFinish',this.curIndex);
				if (this.curIndex >= 0 && !isEmpty(this.practiceList.list) && !isEmpty(this.practiceList.list[this.curIndex])) {
					this.practiceList.list[this.curIndex].joinStatus = '5'
				}
				this.curIndex = -1;
			});
			this.ascription = query.ascription;
			let param = {
				pageNum: 1,
				pageSize: this.pages.pageSize,
				ascription: this.ascription,
				examType: 0
			}
			this.loadData(param);
		},
		onUnload(){
			uni.$off('examFinish');
		},
		methods: {
			loadData(param) {
				param.resultType = this.examType;
				examService.simulationList(param).then(res => {
					uni.stopPullDownRefresh();
					this.showSkeleton = false;
					if (res.success) {
						if (param.pageNum > 1) {
							this.practiceList.list = [...this.practiceList.list, ...res.result.list];
							this.noMoreData = res.result.list.length < this.pages.pageSize
						} else {
							this.practiceList.list = res.result.list;
							this.noData = this.practiceList.list.length == 0;
							this.noMoreData = false;
						}
						this.pages.pageNum = res.result.pageNum;
					}
				});
			},
			//我要参赛
			joinCompetition(index, examId, taskId) {
				examService.joinCompetition(taskId).then(response => {
					if (response.success) {
						//报名成功，改变当前item的状态
						const item = this.practiceList.list[index];
						item.joinStatus = response.result;
						//报名人数+1
						item.joinCount = parseInt(item.joinCount)+1;
					} else {
						uni.showToast({
							icon: "none",
							title: response.message,
							duration: 2000
						})
					}
				})
			},
			//开始考试
			//index, item.paperId,item.examId,item.id,item.taskUserJoinId
			startExam(index, paperId, examId, id, taskUserJoinId) {
				this.curIndex = index;
				let self  = this;
				uni.showModal({
					content: "开始考试后，不能中途退出，到交卷时间强制交卷，请确保手机状态良好",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/exam/examsub?examType=' + self.examType + '&examId=' + examId +
									'&paperId=' + paperId +
									'&taskId=' + id +
									'&taskUserJoinId=' + taskUserJoinId
							})
						}
					}
				})
			},
			//index, item.examId,item.recordId
			analysis(index, examId, recordId) {
				uni.navigateTo({
					url: '/pages/exam/answerAnalysis?examId=' + examId +
						'&recordId=' + recordId +
						'&analyType=1'
				})
			},
			noPermission() {
				uni.showToast({
					title: "您没有参加考试或者无权限查看",
					icon: "none",
					duration: 2000
				})
			},
		},
		onReachBottom() {
			if (this.noMoreData) {
				return true;
			}
			let param = {
				pageNum: this.pages.pageNum + 1,
				pageSize: this.pages.pageSize,
				ascription: this.ascription
			}
			this.loadData(param);
		},
		onPullDownRefresh() {
			let param = {
				pageNum: 1,
				pageSize: this.pages.pageSize,
				ascription: this.ascription
			}
			this.loadData(param);
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.containerin {
		background-color: #fff;
		padding: 20upx 20upx 0;
	}

	.panel {
		background: #fff;

		&-body {
			width: 690upx;
			margin: 0 auto;
			border-bottom: 1px solid #d8d8d8;

			&-item {
				height: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				text-align: left;
				padding: 20upx 22upx;

				.item-info {
					flex: 1;

					&__h3 {
						font-size: 28upx;
						color: #333;
						margin-bottom: 10upx;
					}

					&__h6 {
						font-size: 24upx;
						color: #999999;
						margin-bottom: 10upx;
					}

					&__h7 {
						font-size: 24upx;
						color: #999999;
					}
				}

				.item-timeBox {
					text-align: center;

					.item-time {
						&-one {
							width: 140upx;
							height: 50upx;
							border-radius: 6upx;
							color: #fff;
							text-align: center;
							line-height: 50upx;
							font-size: 20upx;
							display: block;
							background-color: #377cfd;
						}

						&-two {
							width: 140upx;
							height: 50upx;
							border-radius: 6upx;
							color: #fff;
							text-align: center;
							line-height: 50upx;
							font-size: 20upx;
							display: block;
							background-color: #ffc0bb;
						}

						&-three {
							width: 140upx;
							height: 50upx;
							border-radius: 6upx;
							color: #fff;
							text-align: center;
							line-height: 50upx;
							font-size: 20upx;
							display: block;
							background-color: #dedede;
						}

						&-four {
							width: 140upx;
							height: 50upx;
							border-radius: 6upx;
							color: #fff;
							text-align: center;
							line-height: 50upx;
							font-size: 20upx;
							display: block;
							background-color: #5bc5b7;
						}
					}

					.item-text {
						font-size: 20upx;
						display: block;
						color: #999999;
						margin-top: 10upx;
					}
				}
			}
		}

		&-body:last-child {
			border-bottom: 0;
		}
	}

	.loading {
		text-align: center;
		font-size: 28upx;
		padding: 20upx 0;
		color: #999;
	}
</style>
